//
// App
// --------------------------------------------------

@header-height: 42px;
@app-min-width: 1000px;

.app {
	padding: 0;
	background-color: #ededed;
}

.header {
	position: fixed;
	width: 100%;
	min-width: @app-min-width;
	height: @header-height;
	line-height: @header-height;
	top: 0;
	padding-right: 50px;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
	z-index: 2;
	.clearfix();

	.logo {
		float: left;
		width: @side-nav-width;
		height: 100%;
		background-color: @primary-color;
		color: #fff;
		text-align: center;
		font-size: 20px;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.14);
	}

	.user {
		float: right;
		color: #777;

		.user-icon {
			margin-right: 5px;
		}

		.username {
			position: relative;
			padding-right: 15px;
			cursor: pointer;

			&:before {
				position: absolute;
				display: block;
				content: '';
				top: 17px;
				right: 0;
				width: 6px;
				height: 6px;
				border: 1px solid transparent;
				border-right-color: #777;
				border-bottom-color: #777;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				transition: all .3s;
			}

			&:hover {
				color: #444;
			}
		}

		.dropdown-menu {
			min-width: 100px;
			margin: -4px 0 0 -20px;
		}
	}
}

.main {
	min-width: @app-min-width;
	padding: @header-height + 30 0 30px @side-nav-width;
}

.section {
	margin: 0 30px 22px 30px;
}

.toolbar {
	margin: 0 30px 8px 30px;
	.clearfix();
}